<template>
  <div class="tosafe">
    <!-- -----------------安全中心 -->
    <back-nav
      leftText="返回"
      title="安全中心"
      left-arrow
      @navback="navback"
    ></back-nav>
    <!-- 蓝色底 -->
    <div class="blue-box"></div>

    <!-- 修改密码 注销账号 -->
    <div class="passwordBox">
      <div class="my-manage">
        <ul>
          <li @click="changePassword"><span>修改密码</span><span>></span></li>
          <li @click="logOut"><span>注销账号</span><span>></span></li>
        </ul>
      </div>
    </div>

    <!-- 底部弹出层 -->
    <van-popup
      v-model="popupShow"
      position="bottom"
      :style="{ height: '30%' }"
      closeable
      close-icon="close"
    >
    <van-form >
      <div class="popup-title">
        <div>修改密码</div>
        <div class="inp-password">
          <div class="ord-psd">
            <van-field
              v-model="oldpas"
              :type="isOpen1 ? 'text' : 'password'"
              name="旧密码"
              label="旧密码"
              placeholder="旧密码"
              :rules="[{ required: true, message: '请填写密码' }]"
              :right-icon="isOpen1 ? 'eye-o' : 'closed-eye'"
              @click-right-icon="togglePasswordStatus1"
            />
          </div>
          <div class="new-psd">
            <van-field
              v-model="newpas"
              :type="isOpen2 ? 'text' : 'password'"
              name="新密码"
              label="新密码"
              placeholder="新密码"
              :rules="[{ required: true, message: '请填写密码' }]"
              :right-icon="isOpen2 ? 'eye-o' : 'closed-eye'"
              @click-right-icon="togglePasswordStatus2"
            />
          </div>
        </div>
        <!-- 提交按钮 -->
        <div class="submit-btn" @click="submitBtn"><van-button round type="info">提&nbsp;&nbsp;交</van-button></div>
      </div>
      </van-form>
    </van-popup>

    <!-- 退出登录 -->
    <div class="exitLogin" @click="exitLogin">
      <van-button round type="info">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import BackNav from "../components/BackNav.vue";
export default {
  data() {
    return {
      oldpas: "",
      newpas: "",
      popupShow: false,
      isOpen1: false,
      isOpen2: false,
    };
  },
  components: { BackNav },
  methods: {
    logOut(){
      Dialog.confirm({
        title: '⚠️注销账号！',
        message: '注销并销毁账户数据',
      })
        .then(() => {
          // on confirm
          this.axios.post('/destroyAccount').then(res=>{
          console.log('res==>',res);
          this.$toast(`${res.data.msg}，请重新登录`)
          sessionStorage.setItem('token','')
          setTimeout(() => {
            this.$router.push({name:'My'})
          }, 1000);
      }).catch(err=>{
        console.log('err',err);
      })
        })
        .catch(() => {
          // on cancel
        });
    },
    // 提交按钮
    submitBtn(){
      this.axios.post('/updatePassword',{password:this.newpas,oldPassword:this.oldpas}).then(res=>{
          console.log('res==>',res);
          this.$toast(`${res.data.msg}，请重新登录`)
          sessionStorage.setItem('token','')
          setTimeout(() => {
            this.$router.push({name:'My'})
          }, 1000);
      }).catch(err=>{
        console.log('err',err);
      })
    },
    //   修改密码
    changePassword() {
      this.popupShow = true;
    },
    navback() {
      this.$router.push({ name: "My" });
    },
    //退出登录按钮 logout
    exitLogin() {
      Dialog.confirm({
        message: "确定退出登录吗",
      })
        .then(() => {
          // on confirm
          this.axios({
            method: "post",
            url: "/logout",
          })
            .then((res) => {
              console.log("res==>", res);
              this.$router.push({ name: "Home" });
              sessionStorage.setItem("token", "");
            })
            .catch((err) => {
              console.log("err==>", err);
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    togglePasswordStatus1() {
      this.isOpen1 = !this.isOpen1;
    },
    togglePasswordStatus2() {
      this.isOpen2 = !this.isOpen2;
    },
  },
};
</script>

<style lang="less" scoped>
.popup-title {
  // display: flex;
  font-size: 16px;
  color: #666;
  padding: 10px 10px 0px 10px;
  & div:first-child {
    flex: 1;
  }
  .ord-psd{
    border-bottom: 1px solid #9999;
  }
  .inp-password{
    margin-top: 20px;
  }
  .submit-btn{
    width: 355px;
    margin: 10px auto 0 auto;
      .van-button {
        width: 100%;
        background-color: #0c34ba;
      }
  }
}
.exitLogin {
  width: 355px;
  position: absolute;
  top: 350px;
  left: 10px;
  .van-button {
    width: 100%;
    background-color: #0c34ba;
  }
}
//
.passwordBox {
  width: 355px;
  // height: 100px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 10px;
  border-radius: 10px;
}
.my-manage {
  width: 100%;
  li {
    display: flex;
    height: 45px;
    line-height: 45px;
    border-bottom: 2.5px solid rgb(238, 235, 235);
    color: #666;
    text-indent: 10px;
    &:last-child {
      border-bottom: 0px;
    }
    & span:first-child {
      flex: 11;
      font-size: 16px;
    }
    & span:last-child {
      flex: 1;
      font-size: 16px;
    }
  }
}
// 蓝色底
.blue-box {
  width: 100%;
  height: 150px;
  background-color: #0c34ba;
}
.tosafe {
  min-height: 100vh;
  background-color: #f7f7f7;
  position: relative;
}
</style>